<!--
 * @Descripttion: 库存查询列表
 * @version:
 * @Author: cxguo
 * @Date: 2019-08-02 15:03:05
 * @LastEditors: cxguo
 * @LastEditTime: 2020-11-12 14:59:32
 -->
<template>
  <div class="app-container">
    <div class="border-gay padding10 clearfix">
      <!-- <div class="pic fl paddingR10">
        <img class="border-gay" src="https://www.baidu.com/img/bd_logo1.png" width="80" height="80">
      </div> -->
      <div class="text fl">
        <h3>{{ skuName }}</h3>
      </div>
    </div>
    <div class="border-gay bg-gay clearfix">
      <el-row class="canuse-info">
        <el-col :span="3">
          <p>
            <span>可用库存量</span><br>
            <b class="color-red">{{ stockQuantity.canUseQuantity }}</b>
          </p>
        </el-col>
        <el-col :span="1">
          <p>
            <span>=</span><br>
          </p>
        </el-col>
        <el-col :span="3">
          <p>
            <span>期初库存</span><br>
            <b>{{ stockQuantity.originQuantity }}</b>
          </p>
        </el-col>
        <el-col :span="1">
          <p>
            <span>+</span><br>
          </p>
        </el-col>
        <el-col :span="3">
          <p>
            <span>入库量</span><br>
            <b>{{ stockQuantity.quantityIn }}</b>
          </p>
        </el-col>
        <el-col :span="1">
          <p>
            <span>-</span><br>
          </p>
        </el-col>
        <el-col :span="3">
          <p>
            <span>出库量</span><br>
            <b>{{ stockQuantity.quantityOut }}</b>
          </p>
        </el-col>
        <el-col :span="1">
          <p>
            <span>+</span><br>
          </p>
        </el-col>
        <el-col :span="3">
          <p>
            <span>待入库量</span><br>
            <b>{{ stockQuantity.waitQuantityIn }}</b>
          </p>
        </el-col>
        <el-col :span="1">
          <p>
            <span>-</span><br>
          </p>
        </el-col>
        <el-col :span="3">
          <p>
            <span>待出库量</span><br>
            <b>{{ stockQuantity.waitQuantityOut }}</b>
          </p>
        </el-col>
      </el-row>
    </div>
    <div class="margin-t20">
      <el-card shadow="never" class="oper-btn-card">
        <div class="clearfix">
          <div class="fl">
            <span>库存类型:</span>
            <el-select
              v-model="searchData.stockCat"
              clearable
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in optionsData.stockCat"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="fr">
            <el-input
              v-model="searchData.keywords"
              clearable
              style="width: 300px"
              placeholder="请输入单据编号"
            >
              <el-button slot="append" icon="el-icon-search" type="primary" :loading="btnLoading.search" @click="btnSearch()" />
            </el-input>
            <el-button type="primary">导出</el-button>
          </div>
        </div>
      </el-card>
      <el-card shadow="never" class="oper-btn-card margin-t1">
        <vxe-grid
          ref="table"
          class="grid"
          border
          resizable
          highlight-hover-row
          :row-class-name="(({row}) => { return getRowName(row)})"
          :loading="tableLoading.stock"
          :edit-config="{trigger: 'click', mode: 'row'}"
          :columns="columnsData"
          :data="tableData.stock"
        />
      </el-card>
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="pageInfo.size"
        :page-sizes="[20,30,40]"
        :current-page.sync="pageInfo.current"
        :total="pageInfo.total"
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import { oftenuse } from '@/libs/mixins'
import { getStockLogBySkuId } from '@/api/stock/stock-log.js'
import { getStockBySkuId } from '@/api/stock/stock.js'
import Affix from '@/components/Affix'
const BILL_CAT_NO_CHANGE = ['dispatch', 'inventory']

export default {
  name: 'StockList',
  filters: {
  },
  // eslint-disable-next-line vue/no-unused-components
  components: { Affix },
  mixins: [oftenuse],
  props: {
    skuId: {
      type: String,
      required: true
    },
    skuName: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      searchData: { stockCat: '0' },
      dialogVisible: false,
      stockQuantity: {},
      optionsData: {
        stockCat: [
          { value: '0', label: '全部' },
          { value: '1', label: '期初库存' },
          { value: '2', label: '出库量' },
          { value: '3', label: '入库量' },
          { value: '4', label: '待出库量' },
          { value: '5', label: '待入库量' }
        ]
      },
      columnsData: [
        { field: 'businessTime', title: '业务日期', width: 110, showOverflow: true },
        { field: 'billStockNo', title: '出入库单号', width: 150,
          slots: {
            default: (params) => {
              const { row } = params
              const { billStockNo, billCat, direction } = row
              if (billCat === '0') {
                return []
              }
              if (BILL_CAT_NO_CHANGE.indexOf(billCat) !== -1) {
                return null
              }
              const noStockQtyBillCats = ['assemble']
              if (billStockNo) return [<el-link type='primary'>{billStockNo}</el-link>]
              if (noStockQtyBillCats.indexOf(billCat) !== -1) return []
              const value = direction === '0' ? '未出库' : '未入库'
              return [<span>{value}</span>]
            }
          }
        },
        { field: 'billCatName', title: '关联业务', width: 120,
          slots: {
            default: (params) => {
              const { row } = params
              const { stockCat, direction, billCat, billCatName } = row
              if (BILL_CAT_NO_CHANGE.indexOf(billCat) !== -1) {
                return direction === '1' ? billCatName + '-入库' : billCatName + '-出库'
              }
              if (stockCat === '0') {
                return [<span>期初库存</span>]
              } else {
                return [<span>{billCatName}</span>]
              }
            }
          }},
        { field: 'billNo', title: '关联业务单号', width: 150,
          slots: {
            default: (params) => {
              const _this = this
              const { row } = params
              const { billNo, direction } = row
              const data = {
                props: {
                  type: 'primary'
                },
                on: {
                  click: function(e) {
                    const { billId } = row
                    if (direction === '1') {
                      _this.$router.push({
                        name: 'PurchaseDetail',
                        query: { billId: billId }
                      })
                    }
                  }
                }
              }
              if (billNo) {
                return [<el-link {...data}>{billNo}</el-link>]
              }
            }
          }
        },
        { field: 'comegoName', title: '往来单位', showOverflow: true, width: 160 },
        { field: 'quantity', title: '入库量', width: 100,
          slots: {
            default: (params) => {
              const { direction, quantity, billStockNo, stockQuantity } = params.row
              if (direction === '1') {
                return billStockNo ? stockQuantity : quantity
              }
              return null
            }
          }},
        { field: 'quantity', title: '出库量', width: 100,
          slots: {
            default: (params) => {
              const { direction, quantity, billStockNo, stockQuantity } = params.row
              if (direction === '0') {
                return billStockNo ? stockQuantity : quantity
              }
              return null
            }
          }}
      ]
    }
  },
  watch: {
  },
  created() {
    this.initOptionsData()
    this.initData()
  },
  methods: {
    btnSearch() {
      this.setBtnLoading('search', true)
      this.searchData.skuId = this.skuId
      this.getStockLogByGood().then(res => {
        this.setBtnLoading('search', false)
      }).catch(err => {
        console.log(err)
        this.setBtnLoading('search', false)
      })
    },
    // table btns
    // api
    initData() {
      const params = {
        data: { skuId: this.skuId },
        page: this.pageInfo
      }
      this.getStockByGood(this.skuId)
      this.getStockLogByGood(params)
    },
    getStockLogByGood(params = { data: this.searchData, page: this.pageInfo }) {
      this.setTableLoading('stock', true)
      return new Promise((resolve, reject) => {
        getStockLogBySkuId(params).then(res => {
          this.setTableLoading('stock', false)
          this.setTableData('stock', res.data.records)
          this.pageInfo.total = res.data.total
          resolve(res)
        }).catch(err => {
          this.setTableLoading('stock', false)
          this.$notify.error({ title: '查询库存日志异常！', message: err.message })
          reject(err)
        })
      })
    },
    getStockByGood(skuId) {
      return new Promise((resolve, reject) => {
        getStockBySkuId(skuId).then(res => {
          if (res.data.flag) {
            const data = res.data.data || {}
            this.stockQuantity = data
            const { originQuantity, quantityIn, quantityOut, waitQuantityIn, waitQuantityOut } = data
            const canUseQuantity = this.$amount(originQuantity).add(quantityIn)
              .subtract(quantityOut).add(waitQuantityIn).subtract(waitQuantityOut).format()
            this.$set(this.stockQuantity, 'canUseQuantity', canUseQuantity)
          } else {
            this.$notify.error({ title: '查询库存失败！', message: res.data.message })
          }
          resolve(res)
        }).catch(err => {
          this.$notify.error({ title: '查询库存异常！', message: err.message })
          reject(err)
        })
      })
    },
    getRowName(row) {
      const { billCancle, stockCancle } = row
      const _billCancle = billCancle || '0'
      const _stockCancle = stockCancle || '0'
      if (_billCancle === '1' || _stockCancle === '1') {
        return 'is-cancle'
      }
      return ''
    },
    initOptionsData() {

    },
    // on
    onSelectionChange(selectionData) {
      this.setTableSelectionData('stock', selectionData)
    },
    onSizeChange(val) {
      this.pageInfo.current = 1
      this.pageInfo.size = val
      this.getStockLogByGood()
    },
    onSwitchStatusChange(params, val) {
      const { row } = params
      this.updatestock(row).then(res => {
        if (res.data.flag) {
          this.$set(row, 'status', val)
        }
      })
    },
    onEditClosed(params, val) {
      const { row } = params
      this.updatestock(row).then(res => {
        if (res.data.flag) {
          // this.$set(row, 'status', val)
        }
      })
    },
    onCurrentChange(val) {
      this.pageInfo.current = val
      this.getStockLogByGood()
    },
    onDateRange(data) {

    },
    onTabClick(data) {
    }
  }
}
</script>
<style lang="scss" scoped>
 .canuse-info{
     color: #636363;
     text-align: center;
     line-height: 26px;
     b { font-size: 24px;}
  }
</style>
